<template>
  <div class="security">
    <div class="header h-bor-top">
      <div class="content flex_space">
        <div class="flex">
          <span class="head-icon" data-level="0"></span>
          <!-- <div> -->
            <p>
              <span class="name">Hi,{{userData.member}}</span>
              <span class="uid">UID:{{userData.recomcode}}</span>
            </p>
            <!-- <p class="login_time font-12">
              <span class="text">
                最后登录时间:{{loginData.wdate}}
              </span>
              <span class="text">IP:{{loginData.ip}}</span>
              <router-link to='/mycenter/safetyrecord' class="alink">查看安全记录</router-link>
            </p> -->
          <!-- </div> -->
        </div>
        <!-- 签到 糖果社区 -->
        <!-- <div class="signdesk font-blue flex">
          <p @click='navigateTo("/mycenter/candySigin")' >签到</p>
          <p @click='navigateTo("/mycenter/flickerCoin")'>闪兑</p>
          <p @click='navigateTo("/mycenter/candyCoexch")' >糖果兑换</p>
        </div> -->
      </div>
    </div>
    <!-- cont-body -->
    <div class="cont_body">
      <div class="certification">
        <h2>个人认证</h2>
        <p>完成个人认证有助于保护账户安全，提高提现额度及交易权限</p>
        <div>
          <router-link to="uc_auth">
            <i class="el-icon-s-custom"></i>
            身份认证
          </router-link>
          <router-link to="/mycenter/letradeSet"><i class="el-icon-money"></i>收款方式管理</router-link>
          <router-link to="/FrTrade/business"><i class="el-icon-receiving"></i>广告权限申请</router-link>
        </div>
      </div>
      <!-- 003 -->
      <div   class="card-box">
        <h2 >安全密码管理</h2>
        <div  class="content">
          <ul >
            <li  class="icon">
              <span  class="flat-info el-icon-unlock"></span>
            </li>
            <li  class="info">
              <p  class="subtitle">登录密码</p>
              <p >用于保护账户安全</p>
            </li>
            <li  class="operation" @click="uppsssWordOpen(2)">
              <el-button size="mini" >修改</el-button>
            </li>
          </ul>
          <ul >
            <li  class="icon">
              <span  class="el-icon-place flat-info"></span>
            </li>
            <li  class="info">
              <p  class="subtitle">法币资金密码</p>
              <p >用于保护法币资产安全</p>
            </li>
            <li  class="operation" @click="uppsssWordOpen(1)">
              <div >
                <span v-text="userData.tradpasswordstate=='false'?'还未设置密码':'已设置'"
                  :class="userData.tradpasswordstate=='false'?'font-blue':'color-red'" class="m-right-10"
                ></span>
                <el-button size="mini" v-text="userData.tradpasswordstate=='false'?'设置':'修改'"></el-button>
              </div>
            </li>
          </ul>
          <ul  class="last-child">
            <li  class="icon">
              <span  class="el-icon-key ga-warning"></span>
            </li>
            <li  class="info">
              <p  class="subtitle">防钓鱼码</p>
              <p >星空交易平台给您发送的邮件将包含您设置的防钓鱼码，可防范假冒邮件</p>
            </li>
            <li  class="operation">
              <div >
                <el-button size="mini" disabled>暂未开放</el-button>
                <!---->
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--002  -->
      <div class="card-box">
        <h2>双重身份验证</h2>
        <div class="content">
          <ul class="card_ul">
            <li class="icon">
              <span class="el-icon-user-solid security-error"></span>
            </li>
            <li class="info">
              <p class="subtitle">安全等级：低</p>
              <p>强烈建议开启2项双重身份验证</p>
            </li>
            <li class="operation">
              <div class="strength-bar">
                <span class="low"></span>
                <span class></span>
                <span class></span>
              </div>
            </li>
          </ul>
          <ul>
            <li class="icon">
              <span class="el-icon-message mail-info"></span>
            </li>
            <li class="info">
              <p class="subtitle">邮箱</p>
              <p>用于登录、提币、找回密码、修改安全设置、管理API时进行安全验证</p>
            </li>
            <li class="operation">
              <div>
                <dfn>{{userData.email||"未绑定"}}</dfn>
                <el-button size="mini"  v-text="userData.email!=''?'修改':'绑定'"  type="primary" @click="bindMailOpen()"></el-button>
                <!---->
                <!---->
              </div>
            </li>
          </ul>
          <!-- <ul style="display:none">
            <li class="icon">
              <span class="el-icon-phone phone-warning"></span>
            </li>
            <li class="info">
              <p class="subtitle">手机</p>
              <p>用于登录、提币、找回密码、修改安全设置、管理API时进行安全验证</p>
            </li>
            <li class="operation">
              <div>
                <dfn v-text="userData.tel?userData.tel:'未绑定'"></dfn>
                <el-button size="mini"  v-text="userData.tel!=''?'修改':'绑定'"  type="primary" @click="bindPhoneOpen()"></el-button>
              </div>
            </li>
          </ul> -->
          <ul class="last-child">
            <li class="icon">
              <span class="el-icon-odometer ga-warning"></span>
            </li>
            <li class="info">
              <p class="subtitle">谷歌验证器</p>
              <p>用于登录、提币、找回密码、修改安全设置、管理API时进行安全验证</p>
            </li>
            <li class="operation">
              <div>
                <el-button type="primary" @click='navigateTo("/mycenter/bindga")' size="mini">绑定</el-button>
              </div>
            </li>
          </ul>
        </div>
        

        <!-- 003 绑定邮箱-->

        <!-- 004  安全验证-->
        <!-- 005  安全密码管理-->
        
      </div>
      
      <!-- 004 -->
      <div   class="card-box">
        <h2 >个人设置</h2>
        <div  class="content">
          <ul >
            <li  class="long-info">
              <p  class="subtitle">折算货币</p>
              <p >设置后，在资产、最新价、买入价、卖出价等字段，会同时折合为当前折算货币展示</p>
            </li>
            <li  class="operation" v-if="1==2">
              <span  class="current-set">
                <em >¥</em>&nbsp;&nbsp;
                <i >CNY</i>
              </span>
              <button  type="button" class="el-button el-button--text">
                <!---->
                <!---->
                <span>设置</span>
              </button>
            </li>
            <li  class="operation" v-else>暂未开放</li>
          </ul>
          <ul >
            <li  class="long-info">
              <p  class="subtitle">下单二次确认</p>
              <p >开启后，在币币、杠杆、合约交易下单时，增加下单二次确认弹层提示</p>
            </li>
            <li  class="operation">
              <el-switch
                v-model="switchv1"
                active-text=""
                inactive-text="暂未开放" disabled>
              </el-switch>
            </li>
          </ul>
          <ul  class="last-child">
            <li  class="long-info">
              <p  class="subtitle">快速提币</p>
              <p >开启后，若提币目标地址为星空交易平台地址，提币将使用快速通道，无需区块确认</p>
            </li>
            <li  class="operation">
              <el-switch
                v-model="switchv2"
                active-text=""
                inactive-text="暂未开放" disabled>
              </el-switch>
            </li>
          </ul>
        </div>
        <!-- 设置折算货币 -->
        <div data-v-0e9d49c9  class="el-dialog__wrapper" style="display: none;">
          
        </div>
      </div>
    </div>
    <!-- /////////////////003/////////// -->
    <!-- prop001 绑定手机-->
        <el-dialog title="绑定/修改手机号" :visible.sync="bindPhone" width="600px" style="z-index: 8000;">
          <div class="form_cont">
            <div class="code_air setlet_box">
              <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="手机号">
              <el-col :span="5" class="w150">
                <select v-model="areacode">
                  <option v-bind:value="item.code" v-for="(item,index) in phoneareaid"  :key="index">{{item.code}} {{item.cn}} {{item.en}}</option>
                </select>
              </el-col>
              <el-col class="line" :span="1"> <p class="p_cen"></p></el-col>
              <el-col :span="15">
                <el-input
                  autocomplete='off'
                  v-model.trim="formData.phonenum"
                  :placeholder='$t("mobilePlaceholder")||"请输入手机号"'
                  maxlength='11'
                >
                </el-input>
              </el-col>
            </el-form-item>
            <!-- 发送验证码 -->
            <el-form-item :label='formData.type=="1"?$t("mobileCode"):$t("label161")'>
              <div class="mobile-code-wrap p-rel">
                <el-input
                  autocomplete='off'
                  v-model="formData.formCode"
                  :placeholder='myCode?formData.type=="1"?$t("mobileCodePlaceholder"):$t("emailCodePlaceholder"):$t("label170")'
                  :disabled="!myCode"
                >
                </el-input>
                <div
                  @click='sendCode(1)'
                  class="mobile-code abs-v-center color-dsend"
                >{{$t(this.codeTexti18n)}}{{second}}
                </div>
              </div>
            </el-form-item>
            </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="bindPhone = false">取 消</el-button>
            <el-button type="primary" @click="bindPhoneBtn()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 002 绑定邮箱 -->
        <el-dialog title="绑定/修改邮箱" :visible.sync="bindMail" width="600px">
          <div class="form_cont">
            <div class="code_air setlet_box">
              <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="邮箱">
              <el-col :span="24">
                <el-input
                  autocomplete='off'
                  v-model.trim="formData.mailnum"
                  :placeholder='$t("emailPlaceholder")||"请输入邮箱账号"'
                  maxlength='30'  type="email"
                >
                </el-input>
              </el-col>
            </el-form-item>
            <!-- 发送验证码 -->
            <el-form-item :label='formData.type=="2"?$t("mobileCode"):$t("label161")'>
              <div class="mobile-code-wrap p-rel">
                <el-input
                  autocomplete='off'
                  v-model="formData.formCode"
                  :placeholder='myCode?formData.type=="1"?$t("mobileCodePlaceholder"):$t("emailCodePlaceholder"):$t("label170")'
                  :disabled="!myCode"
                >
                </el-input>
                <div
                  @click='sendCode(2)'
                  class="mobile-code abs-v-center color-dsend"
                >{{$t(this.codeTexti18n)}}{{second}}
                </div>
              </div>
            </el-form-item>
            </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="bindMail = false">取 消</el-button>
            <el-button type="primary" @click="bindMailBtn()">确 定</el-button>
          </div>
    </el-dialog>
    <!-- 法币资金密码 -登录密码 prop -->
    <el-dialog
        :title="passUptitle"
        :visible.sync="uppsssWord"
        width="30%"
    >
    <div class="content">
      <div class="che_tab" >
          <template>
            <el-radio-group :disabled='canGetCode?false:true'
                v-model="formData.ntype">
              <el-radio label="1">手机验证码</el-radio>
              <el-radio label='2'>邮箱验证码</el-radio>
            </el-radio-group>
          </template>
          </div>
          <div class="login-form">
            <el-form
                :model='formData'
                label-position='top'
                @submit.native.prevent
              >
            <!-- 发送验证码 -->
            <el-form-item :label='formData.ntype=="1"?$t("mobileCode"):$t("label161")'>
              <div class="mobile-code-wrap p-rel">
                <el-input
                  autocomplete='off'
                  v-model="formData.formCode"
                  :placeholder='myCode?formData.ntype=="1"?$t("mobileCodePlaceholder"):$t("emailCodePlaceholder"):$t("label170")'
                  :disabled="!myCode"
                >
                </el-input>
                <div
                  @click='sendCode(3)'
                  class="mobile-code abs-v-center color-dsend"
                >{{$t(this.codeTexti18n)}}{{second}}
                </div>
              </div>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input
                autocomplete='off'
                v-model="formData.npass"
                type='password'
                placeholder="请输入新密码"
              >
              </el-input>
            </el-form-item>
        </el-form>
      </div>
    </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uppsssWord = false">取 消</el-button>
          <el-button type="primary" @click="formSubmit(val)" v-text="$t('submit')||'提 交'"> </el-button>
        </span>
    </el-dialog>
    <div ref="auth"></div>
  </div>
</template>
<script>
import VueQr from "vue-qr";
export default {
  components: {
    VueQr
  },
    props: {
    title: String,
    bindEmail: {
      type: Boolean,
      default: false
    },
    bindCellphone: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: false
    },
    // 请求接口
    apiKey: "",
    mobileLabel: {
      type: String,
      default: "手机号码"
    },
    oldPasswordLabel: {
      type: String,
      default: "原密码"
    },
    passwordLabel: {
      type: String,
      default: "新密码"
    },
    passwordType: {
      type: String,
      default: "loginpassword"
    }
  },
  data() {
    return {
      userData:{},
      loginData:{},

      apiDatas: {},
      apikey: "",
      Secret: "",
      apiinfo: "",
      // dialog
      bindMail:false,
      bindPhone:false,
      uploginWord:false,
      uppsssWord:false,
      // 表单
      formLabelWidth: '120px',
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      // 区号
      areacode:'',
      phoneareaid:[],
      formData:{
        phonenum:'',
        phonecode:'',
        type:'',
        mailnum:'',
        ntype:'1',
        password:'',
      },
      myCode:false,

      myCode: false,
      codeText: "获取验证码",
      codeTexti18n: "getMsgCode",
      second: "",
      canGetCode: true,
      isAgreed: true,
      verCodeStr: "",
      getCodeTimes: 0,
      passUptitle:'',
      popval:'',
      // 开关
      switchv1:false,
      switchv2:false,
      // 极验码
      myCaptcha:null,
      authToken:'',
    };
  },
  watch: {},
  mounted() {
    this.getUserInfo();
    this.getuserloginlog();
    this.getareacode();
    // this.initAuth();
  },
  computed: {
    
  },
  methods: {
    // 验证码
    initAuth(){
      this.myCaptcha = _dx.Captcha(this.$refs.auth, {
        appId: '84fd16e0a01b295796a6f33e61fa7496', //appId，在控制台中“应用管理”或“应用配置”模块获取
        style:'popup',
        qLink:false,
        logoLink:false,
        success:(token)=>{
          console.log('token:', token)
          this.authToken = token;
          this.myCaptcha.hide();
          // 验证成功发送验证码
          this.sendCode();
        }
      })
    },
    showAuthPopup(val){
      if(val == "1"){
        this.formData.type=1;
        if(!this.Util.isPhone(this.formData.phonenum)){
          this.errMsg("请检查手机号码是否输入正确！");
          return;
        }
        this.myCaptcha.reload();
        this.myCaptcha.show();
      }else if(val=='2'){
        this.formData.type=2;
        if(!this.Util.isEmail(this.formData.mailnum)){
          this.errMsg("请检查邮箱格式是否输入正确！");
          return;
        }
        this.myCaptcha.reload();
        this.myCaptcha.show();
      }else if(val=='3'){
        this.myCaptcha.reload();
        this.myCaptcha.show();
      }
    },
    // 获取用户信息
    getUserInfo() {
      if (!this.storage.get("isLogin")) return;
      this.request(this.api.getuserinfo).then(res => {
        console.log(`个人信息:${JSON.stringify(res)}`);
        if (res.code == "0" && res.data) {
          let data = res.data[0];
          this.userData = Object.assign({}, this.userData, {
            balance: res.data.amount * 1,
            ...data
          });
          this.$bus.emit("userLoaded", this.userData);
        } else {
          this.errMsg(res.msg);
        }
      });
    },
    // 登录信息
    getuserloginlog(){
      this.request(this.api.getuserloginlog).then(res => {
        if (res.code == "0") {
          this.loginData = res.data[0];
        }
      });
    },
    getuserkey() {
      this.request(this.api.getuserkey).then(res => {
        if (res.code == "0") {
          this.apiDatas = res.data[0];
          this.apikey = res.data[0].apikey;
          this.Secret = res.data[0].secretkey;
          // this.apiinfo=res.data[0].apiinfo.toJSONString();
          this.apiinfo = JSON.stringify(res.data[0].apiinfo);
          this.CreateCode();
        }
      });
    },
    CreateCode() {
      // 生成Qrcode apikey
      if (this.apikey) return false;
      this.$bus.on("qrCodeLoad", url => {
        url && (this.apikey = url);
      });
      // Secret
      if (this.Secret) return false;
      this.$bus.on("qrCodeLoad", url => {
        url && (this.Secret = url);
      });
      // 合并码
      if (this.apiinfo) return false;
      this.$bus.on("qrCodeLoad", url => {
        url && (this.apiinfo = url);
      });
    },
    onCopy() {
      this.successMsg("复制成功");
    },
    // 区号
    getareacode() {
      this.request(this.api.areacode,{lang:'1'}).then(res => {
        if(res.code == '0') {
          this.phoneareaid = res.data;
          //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
          this.areacode = this.phoneareaid[0].code;
        }
      })
    },
    sendCode(val) {
      if (!this.canGetCode) return false;
      if(val == "1"){
        this.formData.type=1;
        if(!this.Util.isPhone(this.formData.phonenum)){
          this.errMsg("请检查手机号码是否输入正确！");
          return;
        }
      }else if(val=='2'){
        this.formData.type=2;
        if(!this.Util.isEmail(this.formData.mailnum)){
          this.errMsg("请检查邮箱格式是否输入正确！");
          return;
        }
      }
      if (this.formData.type == "1") {
        if(this.areacode==''){
          this.errMsg('请选择区号并填入手机号' || "选择区号");
          this.myCode = false;
          return
        }
        // this.areacode='86'
        // 手机验证码
        if (!this.Util.isPhone(this.formData.phonenum)) {
            this.errMsg("label123");
            return
        }
        //登录之后个人中心界面 后台接口
        this.request(this.api.getcode, {
          token: this.formData.phonenum,
          type:'registerbytel',
          ip:this.IPS,
          showLoading: true,
          areacode:this.areacode,
          autotoken:this.authToken,
        }).then(res => {
          if (res.code == "0") {
            this.myCode = true;
            this.successMsg(res.msg || "发送成功");
          } else {
            this.errMsg(res.msg || "获取验证码失败");
            this.myCode = false;
          }
        });
      } else if(this.formData.type == "2"){
        //邮箱验证码
        if (!this.Util.isEmail(this.formData.mailnum)) return false;
        this.areacode=0;
        this.request(this.api.getcode, {
          token: this.formData.mailnum,
          type:'registerbyemail',
          ip:this.IPS,
          showLoading: true,
          areacode:this.areacode,
          autotoken:this.authToken,
        }).then(res => {
          if (res.code == "0") {
            this.successMsg(res.msg || "发送成功");
            this.myCode = true;
          } else {
            this.errMsg(res.msg || "获取验证码失败");
            this.myCode = false;
          }
        });
      } else if(this.formData.ntype == "1"){
        if(this.userData.tel==''){
          this.errMsg("未绑定手机号，请绑定手机号");
          return
        }else{
          this.request(this.api.getcode, {
          // token: this.formData.mailnum,
          type:'codebytel',
          ip:this.IPS,
          showLoading: true,
          areacode:this.areacode,
          autotoken:this.authToken,
        }).then(res => {
          if (res.code == "0") {
            this.successMsg(res.msg || "发送成功");
            this.myCode = true;
          } else {
            this.errMsg(res.msg || "获取验证码失败");
            this.myCode = false;
          }
        });
        }
      }else if(this.formData.ntype == "2"){
        if(this.userData.email==''){
          this.errMsg("未绑定邮箱账号，请绑定邮箱账号");
          return
        }else{
          this.request(this.api.getcode, {
          // token: this.formData.mailnum,
          type:'codebyemail',
          ip:this.IPS,
          showLoading: true,
          areacode:this.areacode,
          autotoken:this.authToken,
        }).then(res => {
          if (res.code == "0") {
            this.successMsg(res.msg || "发送成功");
            this.myCode = true;
          } else {
            this.errMsg(res.msg || "获取验证码失败");
            this.myCode = false;
          }
        });
        }
      }
      this.countDown();
    },
    // 倒计时函数
    countDown() {
      this.timer = this.Util.timerCounter({
        onStart: t => {
          this.canGetCode = false;
          this.getCodeTimes += 1;
          this.second = `${t}s`;
          this.codeTexti18n = "countDown";
        },
        onCounting: t => {
          this.second = `(${t}s)`;
          this.codeTexti18n = "countDown";
        },
        onComplete: () => {
          this.canGetCode = true;
          if (this.getCodeTimes > 0) {
            this.codeTexti18n = "tryAgain";
            this.second = "";
          }
        }
      });
    },
    // 打开弹窗
    bindMailOpen(){
      this.bindMail=true;
    },
    bindPhoneOpen(){
      this.bindPhone=true;
      this.formData.type=1;
    },
    uppsssWordOpen(val){
      this.uppsssWord=true;
      if(val==1){
        this.popval=1;
        this.passUptitle='法币资金密码--交易密码';
      }else{
        this.popval=2;
        this.passUptitle='修改登录密码'
      }
    },
    // 绑定手机号
    bindPhoneBtn(){
      let postData={
        tel:this.formData.phonenum,
        code:this.formData.formCode,
        areacode:this.areacode,
      }
      if(this.areacode==''){
        this.errMsg("请选择区号"|| "失败");
      }
      // 根据用户编号修改手机号码 updatetel
      this.request(this.api.updatetel,postData).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg);
          this.formData.formCode='';
          this.getUserInfo();
          this.bindPhone=false;
        } else {
          this.formData.formCode='';
          this.errMsg(res.msg || "失败");
        }
      })
    },
    // 修改邮箱
    bindMailBtn(){
      let postData={
        email:this.formData.mailnum,
        code:this.formData.formCode,
      }
      //根据用户编号修改用户电子邮箱
      this.request(this.api.updateemail,postData).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg);
          this.formData.formCode='';
          this.getUserInfo();
          this.bindMail=false;
        } else {
          this.formData.formCode='';
          this.errMsg(res.msg || "失败");
        }
      })
    },
    formSubmit() {
      // 修改密码
      let telType = this.formData.ntype == 1 ? "tel" : "mail";
      if(this.popval==1){
        if (!this.Util.isPayPass(this.formData.npass)) {
            this.errMsg("label124");
            return
        }
        //根据用户编号修改用户交易密码
        this.request(this.api.updatetradpassword, {
        type: telType,
        code: this.formData.formCode,
        tradpassword: this.formData.npass,
        showLoading: true
      }).then(res => {
        if (res.code == "0") {
          this.formData.formCode='';
          this.formData.npass='';
          this.successMsg(res.msg);
          this.uppsssWord=false;//关闭弹窗
          thus.getUserInfo() ;
          //如果为修改登录密码则退出当前用户登录，否则，修改密码。
          if (this.apiKey != "updateloginpwd") {
            this.$emit("fundPasswordUpdated");
          } else {
            this.userModel.isLogin = false;
            // this.storage.remove("token");
            // this.navigateTo("/user/login");
          }
        } else {
          this.formData.npass='';
          this.formData.code='';
          this.errMsg(res.msg);
        }
      });
      }else if(this.popval==2){
        if (!this.Util.isPassword(this.formData.npass)) {
            this.errMsg("资金密码为6位纯数字");
            return
        }
        this.request(this.api.updateloginpassword, {
        type: telType,
        code: this.formData.formCode,
        loginpassword: this.formData.npass,
        showLoading: true
      }).then(res => {
        if (res.code == "0") {
          this.formData.formCode='';
          this.formData.npass='';
          this.successMsg(res.msg);
          this.uppsssWord=false;//关闭弹窗
          //如果为修改登录密码则退出当前用户登录，否则，修改密码。
          if (this.apiKey != "updateloginpwd") {
            this.$emit("fundPasswordUpdated");
          } else {
            this.userModel.isLogin = false;
            // this.storage.remove("token");
            // this.navigateTo("/user/login");
          }
        } else {
          this.formData.npass='';
          this.formData.code='';
          this.errMsg(res.msg);
        }
      });
      }
      
      
    },
    onTypeChange(){
      if(a){

      }
    }
  }
};
</script>

<style lang="scss" scoped>
.security {
  .header {
    height: 148px;
    background-color: #1b2945;
    .content {
      margin: 0 auto;
      padding-top: 43px;
      width: 1200px;
      .head-icon {
        display: block;
        margin-right: 24px;
        width: 56px;
        height: 56px;
        background: url(../../assets/images/personalCenter/803.png) 0 0/56px
          56px no-repeat;
      }
      .flex{
        align-items: center;
      }
      .name {
        color: #eaeeff;
        font-size: 24px;
        line-height: 32px;
        font-weight: 500;
      }
      .uid {
        display: inline-block;
        padding: 2px 9px;
        margin-left: 24px;
        border: 1px solid #393f66;
        line-height: 16px;
        height: 16px;
        border-radius: 10px;
        color: #b0b8db;
      }
      .text {
        margin-right: 10px;
        line-height: 28px;
        color: #61698a;
      }
      a {
        color: #357ce1;
        cursor: pointer;
        transition: 0.3s;
      }
    }
  }
}
// cont_body
.cont_body {
  margin: 20px auto 160px;
  width: 1200px;
  min-height: 480px;
  box-sizing: border-box;
  .certification {
    border: 1px solid #e6ecf2;
    background: url(../../assets/images/personalCenter/ed6c.png) 891px no-repeat;
    background-size: 253px 96px;
    padding: 24px;
    h2 {
      padding-bottom: 6px;
      font-size: 16px;
      line-height: 18px;
      color: #1c242c;
      font-weight: 600;
      width: 800px;
    }
    p {
      color: #495666;
      line-height: 16px;
      width: 800px;
      padding-bottom: 20px;
      word-break: break-word;
    }
    a,.alink {
      font-size: 14px;
      margin-right: 40px;
      color: #357ce1;
      transition: 0.3s;
    }
  }
}
// 002
.card-box {
  margin-top: 16px;
  border: 1px solid #e6ecf2;
  border-radius: 2px;
  h2 {
    padding-left: 24px;
    font-size: 14px;
    line-height: 48px;
    border-bottom: 1px solid #e6ecf2;
    background-color: #f2f6fa;
    color: #18232d;
    font-weight: 500;
  }
  .content {
    padding: 0 24px;
    ul {
      min-height: 38px;
      border-bottom: 1px solid #e6ecf2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        width: 30px;
        height: 30px;
        border: none;
        margin-right: 24px;
        span {
          display: inline-block;
          width: 30px;
          height: 30px;
          background-size: 30px 30px;
          font-size: 30px;
        }
      }
      .info {
        width: 100%;
        padding: 20px 0;
        padding-right: 40px;
        p {
          line-height: 14px;
        }
        .subtitle {
          font-size: 14px;
          margin-bottom: 10px;
          color: #1c242c;
          font-weight: 500;
        }
      }
      .operation {
        text-align: right;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        min-width: 320px;
      }
      li.long-info{
        padding: 20px 0;
	      width: 100%;
	      padding-right: 40px;
        p{
          font-size: 12px;
          line-height: 14px;
          color: #495666;
        }
        p.subtitle {
          font-size: 14px;
          margin-bottom: 10px;
          color: #1c242c;
          font-weight: 500
        }
      }
      
    }
    .last-child{border: none;}
  }
}

span.mail-info,.flat-info {
  color: #367de1;
}
span.security-error {
  color: #ef5656;
}
span.phone-warning {
  color: #faad14;
}
span.ga-warning {
  color: #faad14;
}
// 弹窗
.form_cont{
  .code_air{
    p{font-size: 12px;line-height: 14px;margin-bottom: 10px;}
    .el-input{margin-left: 0px;}
  }  
  .phone_code{
    p{font-size: 12px;line-height: 14px;margin: 8px 0;}
  }
}
// 区号
.setlet_box{
  .w150{width: 140px;}
  select{height: 39px;border-radius: 4px;border-color: #C0C4CC;width: 140px;}
  .p_cen{text-align: center;}
}
// 签到 糖果社区
.signdesk{
  p{padding: 12px;cursor: pointer;}
}
</style>

